<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="polygon">
  <link rel="stylesheet" href="./assets/common.css">
  <title>Rectangle Binning</title>
</head>

<body>
  <div class="toolbar" style="text-align: center;">
    <label for="size-encoding">Encoding Size: </label>
    <select name="tile" id="size-encoding">
      <option value="off">off</option>
      <option value="on">on</option>
    </select>
  </div>
  <div id="canvas"></div>
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="./assets/data-set.min.js"></script>
  <script src="../build/g2.js"></script>
  <script>
    $.getJSON('./data/gaussion-distribution.json', data => {
      const ds = new DataSet({
        state: {
          sizeEncoding: false
        }
      });
      const dv = ds.createView('diamond').source(data);
      dv.transform({
        sizeByCount: '$state.sizeEncoding', // calculate bin size by binning count
        type: 'bin.rectangle',
        fields: [ 'x', 'y' ], // 对应坐标轴上的一个点
        bins: [ 20, 20 ]
      });

      const chart = new G2.Chart({
        container: 'canvas',
        forceFit: true,
        height: window.innerHeight
      });
      chart.source(dv);
      chart.tooltip(false);
      chart.legend({
        reactive: true
      });
      chart.polygon()
        .position('x*y')
        .color('count', [ 'rgb(200, 200, 255)', 'rgb(0, 0, 255)' ]);
      chart.render();

      const $sizeEncoding = $('#size-encoding');
      $sizeEncoding.on('change', () => {
        if ($sizeEncoding.val() === 'on') {
          ds.setState('sizeEncoding', true);
        } else {
          ds.setState('sizeEncoding', false);
        }
      });
    });
  </script>
</body>

</html>
